<template>
  <div class="goods-add-container qcfd">
    <div class="left-container ">
      <div class="floor floor_one">
        <div class="head-con">
          <div class="headerTitle">
            <i class="iconfont" style="color:#409EFF">&#xe891;</i>
            <span>扫码录商品</span>
          </div>
          <div class="headerBar">
            <span>商品条码</span>
            <el-input v-model="itemBarCode"></el-input>
            <el-button icon="el-icon-search" size="mini" type="primary"></el-button>
            <i> 说明：根据条码到云端获取商品自动填写商品信息</i>
          </div>
        </div>
      </div>
      <div class="floor floor_two">
        <div class="goods-info">
          <div class="goods-baseinfo">
            <i class="iconfont" style="color:#FF8640;font-size: 26px!important;">&#xe621;</i>
            <span>基本信息</span>
          </div>
          <div style="padding-right: 120px;">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

              <el-row>
                <el-col :span="8">
                  <el-form-item label="商品分类">
                    <el-cascader :options="categoryList" @change="getCheckedNodes">
                      <template slot-scope="{ node, data }">
                        <span>{{ data.label }}</span>
                        <!--                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>-->
                      </template>
                    </el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品sku编码" prop="itemSkuCode">
                    <el-input v-model="ruleForm.itemSkuCode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品名称" prop="itemName">
                    <el-input v-model="ruleForm.itemName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-col :span="8">
                    <el-form-item label="商品品牌" prop="brandId">
                      <el-select v-model="ruleForm.brandId" placeholder="请选择">
                        <el-option
                          v-for="item in newBrandSelect"
                          :key="item.id"
                          :label="item.brandCnName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>

          </div>
        </div>
      </div>
      <div class="floor floor_three">
        <div class="SpecificationAttributes">
          <div class="Specification-attributes">
            <i class="iconfont" style="color:yellowgreen;font-size: 24px!important;">&#xe637;</i>
            <span>商品参数</span>
          </div>
          <div class="Attr">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="包装长(cm)" prop="length">
                    <el-input v-model="ruleForm.length"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="包装宽(cm)" prop="width">
                    <el-input v-model="ruleForm.width"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="包装高(cm)" prop="height">
                    <el-input v-model="ruleForm.height"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="毛重(kg)" prop="weight">
                    <el-input v-model="ruleForm.weight"></el-input>
                  </el-form-item>
                </el-col>

              </el-row>

            </el-form>
          </div>
        </div>
      </div>
      <div class="floor floor_four Specifications">
        <div>
          <i class="iconfont" style="color:#3a4980;font-size: 30px!important;padding-left:5px;">&#xe676;</i>
          <span>规格属性</span>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="8" v-for="(item,index) in attr " :key="index">
              <el-form-item :label="item.label">
                <el-input v-model="item.value"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

<!--          <el-row>-->

<!--            <el-col :span="8">-->
<!--              <el-form-item label="颜色">-->
<!--                <el-input v-model="color"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="保质期">-->
<!--                <el-input v-model="quality"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="尺寸">-->
<!--                <el-input v-model="size"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="风格">-->
<!--                <el-input v-model="style"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="面料">-->
<!--                <el-input v-model="fabric"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="材质">-->
<!--                <el-input v-model="material"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="图案">-->
<!--                <el-input v-model="pattern"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="系列">-->
<!--                <el-input v-model="series"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="净含量">-->
<!--                <el-input v-model="netContent" style="width:70%"></el-input>-->
<!--                <el-dropdown>-->
<!--                      <span class="el-dropdown-link">-->
<!--                       {{  netContentVal}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                      </span>-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item @click.native="getNetContent">g</el-dropdown-item>-->
<!--                    <el-dropdown-item @click.native="getNetContent">kg</el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="10">-->
<!--              <el-form-item label="容量">-->
<!--                <el-input v-model="capacity" style="width:75%;"></el-input>-->
<!--                <el-dropdown>-->
<!--                      <span class="el-dropdown-link">-->
<!--                       {{  capacityVal}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                      </span>-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item @click.native="changeCapacity">ml</el-dropdown-item>-->
<!--                    <el-dropdown-item @click.native="changeCapacity">l</el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
        </el-form>
        <div style="margin-left:30px;line-height: 50px;">
          <span style="color: #67c23a;">*自定义规格*  <i class="el-icon-circle-plus" @click="addSpecifications"></i></span>
      </div>

        <div style="display: flex;padding-bottom:10px;margin-left:60px;width: 35%;" v-for="(item, index) in arrData" :key="index">
          <el-input v-model="item.specificationName" style="width:35%;margin-right:50px;" placeholder="请输入属性名"></el-input>
          <el-input v-model="item.specificationValue" style="width:35%;" placeholder="请输入属性值">></el-input>
        </div>
      </div>
      <div class="floor floor_five">
        <div class="measurementUnit">
          <div style="display: flex;justify-content: space-between">
            <div class="measurement-unit">
              <i class="iconfont" style="color:#EB1331;font-size: 26px!important;padding-left:5px;">&#xe626;</i>
              <span>计量单位</span>
            </div>
            <div style="margin-top:20px;margin-right:20px;">
              <el-checkbox v-model="checked" @change="enableUse">启用多计量</el-checkbox>
            </div>
          </div>
          <div class="unit" v-if="show">
            <el-row>
              <el-col :span="12">
                <span style="margin-left:1px; margin-right: 10px;">主计量单位(包装)</span>
                <el-select v-model="unitName" placeholder="请选择" style="width: 60%">
                  <el-option
                    v-for="item in unitList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <div>
                  <span>进货价</span>
                  <el-input style="width: 80%;" v-model="advisePurchasePrice"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-if="userMeasure">
            <div>
              <el-row>
                <el-col :span="12">
                  <span style="margin-left: 30px; margin-right: 10px;">主计量单位(包装)</span>
                  <el-select v-model="unitName" placeholder="请选择" style="width: 60%">
                    <el-option
                      v-for="item in unitList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <div>
                    <span>进货价</span>
                    <el-input style="width: 80%;" v-model="advisePurchasePrice"></el-input>
                  </div>
                </el-col>
              </el-row>
              <div style="margin-left: 30px;">
                <span>辅计量单位(包装)</span>
              </div>
              <div v-for="(item,index) in arr" :key="index">
                <el-row>
                  <el-col :span="17">
                    <el-select v-model="item.unitName" placeholder="请选择" style="width:20%;margin-left: 150px;">
                      <el-option
                        v-for="item in unitList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                    <span style="margin-left: 20px;">主</span>
                    <el-input style="width: 10%;" oninput="value=value.replace(/[^\d]/g,'')"
                              v-model="item.mainUnit"></el-input>
                    : <span>辅</span>
                    <el-input v-model="item.secondUnit" style="width: 10%"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <span>进货价</span>
                      <el-input style="width: 40%;" v-model="item.advisePurchasePrice"></el-input>
                      <i class="el-icon-circle-plus" @click="addinfo" style="cursor: pointer;"></i>
                      <i class="el-icon-delete" @click="delInfo" style="cursor: pointer;"></i>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="floor floor_six">
        <div class="stockInfo">
          <div class="stock-Info">
            <i class="iconfont" style="color:#ACA4DA;font-size: 25px!important;margin-left: 5px;">&#xe607;</i>
            <span>库存信息</span>
          </div>
          <div style="display: flex;margin-left:100px;">
            <el-checkbox-group v-model="qualityPeriod">
              <el-checkbox label="批次管理"></el-checkbox>
              <el-checkbox label="保质期管理" @change="Qmanage"></el-checkbox>
            </el-checkbox-group>
            <div v-if="isShowQuality" style="margin-top: -8px;">
              <span>保质期</span>
              <el-input style="width: 50px;"></el-input>
              <el-dropdown>
                      <span class="el-dropdown-link">
                       {{  selectVal}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="commandVal">年</el-dropdown-item>
                  <el-dropdown-item @click.native="commandVal">月</el-dropdown-item>
                  <el-dropdown-item @click.native="commandVal">天</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <el-row>
            <el-col :span="10">
              <div style="display: flex;margin-left: 120px;margin-top: 20px;">
                <span style="width: 100px;">最低库存</span>
                <el-input v-model="inventoryThresholdValue"></el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="floor floor_seven">
        <div class="imageInfo">
          <div class="image-info">
            <i class="iconfont" style="color:#40FFA3;font-size: 25px!important;margin-left: 5px;">&#xe6d6;</i>
            <span>商品图片 <a>支持最多上传6张（选择的图片单张大小不超过2MB，支持jpg，jpeg，gif，bmp，png）</a></span>
          </div>
          <div class="upload">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </div>
      </div>
      <div class="goods-footer">
        <el-button size="medium" type="primary"  @click="submitForm('ruleForm')">新增</el-button>
        <el-button size="medium" style="margin-right:15%" @click="returnPage">取消</el-button>
      </div>
    </div>

    <div class="right-container">
      <ul>
        <li class="dot" @click="anchors(1)">
          <p><i class="iconfont" style="color:#409EFF;;">&#xe891;</i></p>
          扫码录商品
        </li>
        <li :class="steps == 1?'lines':'no_line'"></li>
        <li class="dot" @click="anchors(2)">
          <p><i class="iconfont" style="color:#FF8640;font-size: 25px!important;">&#xe621;</i></p>
          <div style="margin-left: 10px;"> 基本信息</div>
        </li>
        <li :class="steps == 2?'lines':'no_line'"></li>
        <li class="dot" @click="anchors(3)">
          <p><i class="iconfont" style="color:yellowgreen;font-size: 26px!important; ">&#xe621;</i></p>
          <div style="margin-left:10px;">
            商品参数
          </div>
        </li>
        <li :class="steps == 3?'lines':'no_line'"></li>
        <li class="dot" @click="anchors(4)">
          <p><i class="iconfont" style="color:#3a4980;font-size: 29px!important; ">&#xe676;</i></p>
          <div style="margin-left:10px;">
            规格属性
          </div>
        </li>
        <li :class="steps == 4?'lines':'no_line'"></li>
        <li class="dot" @click="anchors(5)">
          <p><i class="iconfont" style="color:yellowgreen;font-size: 26px!important; ">&#xe626;</i></p>
          <div style="margin-left:10px;">
            计量单位
          </div>
        </li>
        <li :class="steps == 5?'lines':'no_line'"></li>
        <li class="dot" @click="anchors(6)">
          <p><i class="iconfont" style="color:#ACA4DA;font-size: 25px!important;margin-left: 5px;">&#xe607;</i></p>
          <div style="margin-left:10px;">
            库存信息
          </div>
        </li>
        <li :class="steps == 6?'lines':'no_line'"></li>
        <li class="dot" @click="anchors(7)">
          <p><i class="iconfont" style="color:#40FFA3;font-size: 26px!important; ">&#xe6d6;</i></p>
          <div style="margin-left:10px;">
            商品图片
          </div>
        </li>
        <li :class="steps == 7?'lines':'no_line'"></li>
      </ul>
    </div>
  </div>
</template>
<script>
  import VTable from "components/common/PageTable/VTable"
  import VForm from "components/common/VForm"
  import SplitVertical from "components/common/SplitVertical"


  export default {
    components: {
      VForm, VTable, SplitVertical
    },
    data() {
      return {
        i:0,
        //规格属性
        attr:[
          {label:'颜色',id:1,value:''},
          {label:'净含量',id:2,value:''},
          {label:'容量',id:3,value:''},
          {label:'尺寸',id:4,value:''},
          {label:'风格',id:5,value:''},
          {label:'面料',id:6,value:''},
          {label:'材质',id:7,value:''},
          {label:'图案',id:8,value:''},
          {label:'系列',id:9,value:''},
          {label:'保质期',id:10,value:''}
        ],
        arrData: [],
        isShowQuality:false,
        //库存值
        inventoryThresholdValue: '',
        //保质期v-model
        qualityPeriod:['批次管理'],
        //启用多计量
        arr: [{primaryUnit:false,unitName:'', mainUnit: '',secondUnit: '',advisePurchasePrice:'',}],
        //主进货价
        advisePurchasePrice: '',
        checked: '',
        show: true,
        userMeasure: false,
        unitName: '',
        value: '',
        //v-model
        itemBarCode: '',
        //滑轮 距顶部的距离
        steps: 0,
        scrollTop: 0,
        floorOne: 0,
        floorTwo: 0,
        floorThree: 0,
        floorFour: 0,
        floorFive: 0,
        floorSix: 0,
        floorSeven: 0,
        //下拉框的值
        capacityVal: 'ml',
        netContentVal: 'g',
        selectVal:'月',
        //图片
        dialogImageUrl: '',
        dialogVisible: false,
        //form
        ruleForm: {
          brandId: '',
          itemSkuCode: '',
          itemName: '',
          length: '',
          width: '',
          height: '',
          weight: '',
        },
        rules: {
          itemSkuCode: [
            {required: true, message: '请输入商品sku编码', trigger: 'blur'},
          ],
          itemName: [
            {required: true, message: '请输入商品名称', trigger: 'change'}
          ],
          brandId: [
            {required: true, message: '请选择商品品牌', trigger: 'change'}
          ],
          length: [
            {required: true, message: '请输入商品的长', trigger: 'blur'}
          ],
          width: [
            {required: true, message: '请输入商品的宽', trigger: 'blur'}
          ],
          height: [
            {required: true, message: '请输入商品的高 ', trigger: 'blur'}
          ],
          weight: [
            {required: true, message: '请输入商品的重量', trigger: 'blur'}
          ],
        },
        // unit: [],
        //三级联动菜单list
        categoryList: [],
        //三级联动菜单选中的值
        categoryVal: [],
        //规格属性
        specifications: [],
        //属性
        attributes: [],
        //品牌选择
        newBrandSelect: [],
        //辅计算
        unitAndPrices: [],
        //单位的list
        unitList: [],
      }
    },
    created() {
      this.getBrandSelector()
      this.getCategoryData()
      //获取单位
      this.getUnit()
    },
    mounted() {
      this.getFloorDistance();
      this.getPulleyTopDistance();
    },
    methods: {
      getUnit() {
        let success = data => {
          if (data.statusCode === "1") {
            this.unitList = data.body;
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.itemUnitSelector({}, success)
      },
      //取消
      returnPage() {
        this.$router.go(-1)
      },
      Qmanage(val){
          if(val === true){
            this.isShowQuality=true;
          }else{
            this.isShowQuality=false;
          }
      },
      addSpecifications() {
        let item = {
          specificationName: "",
          specificationValue: ""
        }
        this.arrData.push(item)
      },
      //增加辅计量
      addinfo() {
        this.i=this.i+1;
        let unitAndPrices={
          unitName:'',
          primaryUnit:false,
          mainUnit: '',
          secondUnit: '',
          advisePurchasePrice:'',
        }
        this.arr.push(unitAndPrices)
      },
      delInfo() {
        this.arr.splice(this.i--, 1)
      },
      getCategoryData() {
        let succ = data => {
          if (data.statusCode === "1") {
            if (data.body !== null) {
              data.body.forEach(ele => {
                var param = {
                  value: Number,
                  label: String,
                  children: []
                }
                param.value = ele.id
                param.label = ele.categoryName
                //二级
                if (ele.children) {
                  ele.children.forEach(item => {
                    if (item.pid === ele.id) {
                      var childA = {
                        value: Number,
                        label: String,
                        children: []
                      }
                      childA.value = item.id
                      childA.label = item.categoryName
                      param.children.push(childA)
                      //三级
                      if (item.children) {
                        item.children.forEach(child => {
                          if (child.pid === item.id) {
                            var childB = {
                              value: Number,
                              label: String,
                            }
                            childB.value = child.id
                            childB.label = child.categoryName
                            // console.log(child.children,childB)
                            childA.children.push(childB)
                          }
                        })
                      }
                    }
                  })
                }
                this.categoryList.push(param)
              })
            }
            //一级
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.itemCategoryList({}, succ)
      },
      getBrandSelector() {
        let succ = data => {
          if (data.statusCode === "1") {
            this.newBrandSelect = data.body;
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.newBrandSelector({}, succ)
      },
      //获取选取的叶子节点
      getCheckedNodes(val) {
        this.categoryVal = val;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.addGoods()
          } else {
            return false;
          }
        });
      },
      //新增商品
      addGoods() {
        if(this.itemBarCode == ''){
          return  this.$message.warning("请输入条形码")
        }
        if(this.categoryVal.length == 0){
          return  this.$message.warning("请选择分类")
        }
        if(this.ruleForm.itemSkuCode == ''){
          return  this.$message.warning("请输入商品的sku编码")
        }
        if(this.ruleForm.itemName == ''){
          return  this.$message.warning("请输入商品名称")
        }
        if(this.ruleForm.itemName == ''){
          return  this.$message.warning("请输入商品品牌")
        }
        if(this.ruleForm.width == ''){
          return  this.$message.warning("请输入宽")
        }
        if(this.ruleForm.height == ''){
          return  this.$message.warning("请输入高")
        }
        if(this.ruleForm.weight == ''){
          return  this.$message.warning("请输入重量")
        }
        if(this.ruleForm.weight == ''){
          return  this.$message.warning("请输入重量")
        }
        //处理属性
        for(let ele of this.attr){
          let attr={
            attributeId:'',
            attributeValue:''
          }
          if(ele.id != '' && ele.value !=''){
            attr.attributeId =ele.id;
            attr.attributeValue=ele.value;
            this.attributes.push(attr)
          }
        }
        let obj = {};
        this.attributes = this.attributes.reduce(function(item, next) {
          obj[next.attributeId]  ? '' :  obj[next.attributeId]  = true && item.push(next);
          return item
        }, [])
        //处理辅计量
        let unitAndPrices={
          unitName:this.unitName,
          primaryUnit:true,
          unitConversion:1 + ':'+ 1,
          advisePurchasePrice:this.advisePurchasePrice
        }
        if(this.unitName && this.advisePurchasePrice){
          this.unitAndPrices.push(unitAndPrices)
        }
        for(let item of this.arr){
          let unit={
            unitName:'',
            unitConversion:'',
            advisePurchasePrice:'',
            primaryUnit:'',
          }
          if(item.primaryUnit  === false){
            if(item.mainUnit && item.mainUnit && item.advisePurchasePrice && item.unitName){
              unit.unitName=item.unitName;
              unit.advisePurchasePrice=item.advisePurchasePrice;
              unit.unitConversion=item.mainUnit+ ":" +item.secondUnit;
              unit.primaryUnit=false;
              this.unitAndPrices.push(unit)
            }
          }
        }
        let hash = {};
        this.unitAndPrices = this.unitAndPrices.reduce(function(item, next) {
          hash[next.unitName]  ? '' :  hash[next.unitName]  = true && item.push(next);
          return item
        }, [])
        let param = this.ruleForm;
        param['itemBarCode'] = this.itemBarCode;
        param['primaryCategoryId'] = this.categoryVal[0];
        param['secondaryCategoryId'] = this.categoryVal[1];
        param['tertiaryCategoryId'] = this.categoryVal[2];
        param['userId'] = localStorage.getItem("userID");
        param['inventoryThresholdValue'] = this.inventoryThresholdValue;
        param['attributes'] = this.attributes;
        param['specifications'] = this.arrData;
        param['unitAndPrices'] = this.unitAndPrices
        console.log(param,"$$$$")
        let succ = data => {
          if (data.statusCode === "1") {
            this.$message.success('添加商品成功')
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.itemAdd(param, succ)
      },
      //启用多计量单位
      enableUse(val) {
        if (val === true) {
          this.show = false;
          this.userMeasure = true
        } else {
          this.show = true;
          this.userMeasure = false
        }
      },
      handleRemove(file, fileList) {
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //获取容量
      changeCapacity(val) {
        this.capacityVal = val.target.innerText
      },
      //获取净含量
      getNetContent(val) {
        this.netContentVal = val.target.innerText
      },
      commandVal(val){
        this.selectVal=val.target.innerText
      },

      anchors(val) {
        switch (val) {
          case 1 :
            this.pulleyRoll(this.floorOne - 56, this.scrollTop);
            break;
          case 2 :
            this.pulleyRoll(this.floorTwo + this.floorOne - 56, this.scrollTop);
            break;
          case 3 :
            this.pulleyRoll(this.floorThree + this.floorTwo + this.floorOne - 56, this.scrollTop);
            break;
          case 4 :
            this.pulleyRoll(this.floorFour + this.floorThree + this.floorTwo + this.floorOne - 56, this.scrollTop);
            break;
          case 5 :
            this.pulleyRoll(this.floorFive + this.floorFour + this.floorThree + this.floorTwo + this.floorOne, this.scrollTop, this.scrollTop);
            break;
          case 6 :
            this.pulleyRoll(this.floorSix + this.floorFive + this.floorFour + this.floorThree + this.floorTwo + this.floorOne, this.scrollTop, this.scrollTop);
            break;
          case 7 :
            this.pulleyRoll(this.floorSeven + this.floorSix + this.floorFive + this.floorFour + this.floorThree + this.floorTwo + this.floorOne, this.scrollTop, this.scrollTop);
            break;
        }
      },
      /**
       * 滑轮 向上滚动和向下滚动的函数
       * top是楼层距窗体顶部的距离,distance当前滚动条与窗体顶部的距离
       * */
      pulleyRoll(top, distance) {
        /*向下滚动*/
        if (distance < top) {
          var small_interval = (top - distance) / 50;
          var i = 0;
          var timer = setInterval(() => {
            i++;
            distance += small_interval;
            document.documentElement.scrollTop = distance;
            if (i == 50) {
              clearInterval(timer);
            }
          }, 10)
        }
        /*向上滚动*/
        else if (distance > top) {
          var small_interval = (distance - top) / 50;
          var i = 0;
          var timer = setInterval(() => {
            i++;
            distance -= small_interval
            document.documentElement.scrollTop = distance;
            if (i == 50) {
              clearInterval(timer);
            }
          }, 10);
        }
      },
      /**
       * 拿到所有 楼层距窗体顶部的距离
       * */
      getFloorDistance() {
        //拿到每个 楼层距窗体顶部的距离
        let floorOne = document.getElementsByClassName("floor_one")[0].offsetTop;
        let floorTwo = document.getElementsByClassName('floor_two')[0].offsetTop;
        let floorThree = document.getElementsByClassName('floor_three')[0].offsetTop;
        let floorFour = document.getElementsByClassName('floor_four')[0].offsetTop;
        let floorFive = document.getElementsByClassName('floor_five')[0].offsetTop;
        let floorSix = document.getElementsByClassName('floor_six')[0].offsetTop;
        let floorSeven = document.getElementsByClassName('floor_seven')[0].offsetTop;
        this.floorOne = floorOne;
        this.floorTwo = floorTwo;
        this.floorThree = floorThree;
        this.floorFour = floorFour;
        this.floorFive = floorFive;
        this.floorSix = floorSix;
        this.floorSeven = floorSeven
      },
      /**
       * 滑轮滚动事件 返回滑轮距顶部的距离
       * */
      getPulleyTopDistance() {
        var that = this;
        window.onscroll = function () {
          that.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        }
      }
    },
    watch: {
      //监听 滑轮滚动的值的变化 来实现自动锚点
      scrollTop(val) {
        val += 50;
        if (val > this.floorOne && val <= this.floorTwo) {
          this.steps = 0;
        } else if (val > this.floorTwo && val <= this.floorThree) {
          this.steps = 1;
        } else if (val > this.floorThree && val <= this.floorFour) {
          this.steps = 2;
        } else if (val > this.floorFour && val <= this.floorFive) {
          this.steps = 3;
        } else if (val > this.floorFive) {
          this.steps = 4;
        } else if (val > this.floorSix) {
          this.steps = 5
        } else if (val > this.floorSeven) {
          this.steps = 6
        }
      },
    }
  }
</script>
<style scoped>
  .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: none;
    border-bottom: 1px solid #DCDFE6 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }
</style>
<style lang="scss" scoped>
  $color: 2px solid #e8e8e8;
  .goods-add-container {
    padding: 0 2px;
    span {
      padding-left: 5px;
      display: inline-block;
      font-size: 14px;
      color: #666;
    }
    .left-container {
      padding-right: 155px;
      .goods-footer {
        width: 95%;
        position: fixed;
        background: #fff;
        height: 60px;
        bottom: 0;
        z-index: 9999;
        box-shadow: 0 -1px 6px 0 rgba(0, 0, 0, 0.15);
        display: table;
        text-align: right;
        line-height: 60px;
      }
      .head-con {
        height: 150px;
        padding: 0 10px;
        background-color: #fff;
        border-left: $color;
        border-right: $color;
        border-bottom: $color;
        .headerTitle {
          line-height: 60px;
        }
        .headerBar {
          span {
            margin-left: 50px;
          }
          .el-input {
            width: 30%;
          }
          i {
            display: inline-block;
            font-size: 14px;
            color: #666;
          }
        }
      }
      .goods-info {
        margin-top: 3px;
        background-color: #fff;
        border-left: $color;
        border-right: $color;
        border-bottom: $color;
        height: 190px;
        .goods-baseinfo {
          padding: 5px;
          line-height: 50px;
          span {
            padding-top: -10px;
          }
        }
      }
      .SpecificationAttributes {
        margin-top: 3px;
        background-color: #fff;
        border-left: $color;
        border-right: $color;
        border-bottom: $color;
        height: auto;
        padding-right: 100px;
        .Specification-attributes {
          padding: 5px;
          line-height: 50px;
        }
      }
      .Specifications {
        margin-top: 3px;
        background: #fff;
        height: auto;
        border-left: $color;
        border-right: $color;
        border-bottom: $color;
        padding-right: 100px;
      }
      .measurementUnit {
        margin-top: 3px;
        min-hieght: 100px;
        padding-bottom: 20px;
        background: #fff;
        border-left: $color;
        border-right: $color;
        border-bottom: $color;
      }
      .unit {
        margin-left: 120px;
      }
      .imageInfo {
        margin-top: 3px;
        background-color: #fff;
        border-left: $color;
        border-right: $color;
        border-bottom: $color;
        height: 250px;
        .image-info {
          a {
            display: inline-block;
            font-size: 12px;
            color: #666;
          }
        }
        .upload {
          margin-left: 40px;
        }
      }
      .stockInfo {
        margin-top: 3px;
        background-color: #fff;
        border-left: $color;
        border-right: $color;
        border-bottom: $color;
        height: 150px;
        .checkbox-attr {
          margin-left: 100px;
        }
        .stock-infomation {
          display: flex;
          .stock-infoData {
            flex: 1;
            label {
              color: #8c8484;
              font-size: 14px;
              display: inline-block;
              width: 150px;
              text-align: center;
            }
            .el-input {
              width: 50%;
            }
          }
        }
      }
    }
    .right-container {
      width: 150px;
      position: fixed;
      right: 12px;
      top: 56px;
      height: 1000px;
      z-index: 999;
      background: #fff;
      ul {
        padding-top: 85px;
        width: 150px;
        text-align: center;
        li {
          font-size: 14px;
          color: #666666;
        }
        .dot {
          margin: 0 auto;
          background: #fff;
        }
        .dot {
          cursor: pointer;
        }
      }
    }
    .no_line {
      width: 2px;
      height: 40px;
      background: none;
      text-align: center;
      border-radius: 0;
      margin: 0 auto;
    }
    .lines {
      width: 2px;
      height: 40px;
      background: red;
      text-align: center;
      border-radius: 0;
      margin: 0 auto;
    }
  }
</style>


